<template>
	<view>
		<view v-for="(item,index) in goods_canshu" style="width: 90%;margin: 10rpx auto;">
			<view style="display: flex;align-items: center;">
				{{item.name}}
				<text @click="add_canshu(item)"
					style="display: flex;background-color: blue;justify-content: center;align-items: center;width: 45rpx;height: 45rpx; border-radius: 50%;margin-left: 55rpx;">
					<uni-icons style="color: white;" type="paperplane"></uni-icons>
				</text>
			</view>

			<view style="display: flex;flex-wrap: wrap;margin-top: 30rpx;margin-bottom: 85rpx;">
				<view v-for="(item1, index1) in item.canshu" :key="index1"
					style="display: flex;justify-content: center;align-items: center;background-color: coral;color: white;padding:10rpx 25rpx;margin-right: 10rpx;border-radius: 15rpx;">
					{{ item1 }}
				</view>
			</view>
		</view>
		<!-- 下面是点 修改属性参数 使用 -->
		<model v-if='add_canshu_show' @colseModel='add_canshu_show = false'>
			<view style="display:flex;width: 100%;font-weight: 700;justify-content: center;margin-bottom: 25rpx;">
				修改商品【{{canshu.name}}】参数
				<text @click="add_canshu1()"
					style="display: flex;background-color: blue;color: white;justify-content: center;align-items: center;width: 45rpx;height: 45rpx; border-radius: 50%;margin-left: 55rpx;">
					+
				</text>
			</view>
			<view v-for="(item, index) in canshu.canshu">
				<view style="display: flex;margin-bottom: 25rpx;align-items: center;">
					<input
						style="display: flex; border-radius: 15rpx;border: 3rpx solid darkorange;padding: 10rpx 25rpx; width:120rpx;justify-content: center;align-items: center;"
						type="text" v-model="canshu.canshu[index]" />
					<text @click="del_canshu(index)"
						style="display: flex;margin-left: 55rpx;font-size: 60rpx; border-radius: 50%; width: 50rpx;height: 50rpx;background-color:red;color: white;justify-content: center;align-items: center;">
						-
					</text>
				</view>
			</view>



			<view style="display: flex;flex-direction: row;margin-top: 80rpx;justify-content: center;">
				<view
					style="display: flex;width: 120rpx;border-radius: 15rpx;background-color: blue;color: white;justify-content: center;align-items: center;padding: 10rpx;"
					@click="tijiao_canshu">
					提交
				</view>
				<view
					style="display: flex;width: 120rpx;border-radius: 15rpx;background-color: blue;color: white;justify-content: center;align-items: center;margin-left: 60rpx;padding: 10rpx;"
					@click="add_canshu_show = false">
					返回
				</view>
			</view>
		</model>
	</view>
</template>

<script>
	import model from '../../components/model.vue'
	export default {
		components: {
			model
		},
		data() {
			return {
				add_canshu_show: false,
				goods_canshu: []
			}
		},
		onLoad() {
			this.get_goods_canshu()
		},
		methods: {
			del_canshu(index) {
				this.canshu.canshu.splice(index, 1)
			},
			tijiao_canshu() {
				uniCloud.callFunction({
					name: "fun1",
					data: {
						leixing: 9,
						tiaojian: {
							_id: this.canshu._id
						},
						shuju: {
							canshu: this.canshu.canshu,
							update_time: new Date().getTime(),
							jingshouren: this.jingshouren
						}
					}
				}).then(res => {
					this.add_canshu_show = false
					this.get_goods_canshu()
					console.log("55", res.result)
				})
			},
			add_canshu1() {
				this.canshu.canshu.push("")
				console.log(this.canshu);
			},
			// 添加商品的属性参数，如颜色，码号
			add_canshu(e) {
				console.log("e", e);
				this.canshu = e
				this.add_canshu_show = true
			},
			get_goods_canshu() {
				uniCloud.callFunction({
					name: "fun1",
					data: {
						leixing: 8,
					}
				}).then(res => {
					this.goods_canshu = res.result.data
					console.log("55", res.result)
				})
			}
		}
	}
</script>

<style>

</style>